import VueNeditorWrap from '../../../component/vue-neditor/lib/index.vue'
import EditorBar from '../../../component/wangEnduit.vue'
import {
	Editor,
	Toolbar
} from '@wangeditor/editor-for-vue'
export default {
	name: "test",
	components: {
		VueNeditorWrap,
		EditorBar,
		Editor,
		Toolbar
	},
	data() {
		return {
			form: {
				actionid: "",
				url: "",
				title: "",
				context: "",
			},
			editor: {
				customConfig: {
					uploadImgServer: '/system/v1/common/upload',
				},
			},
			html: '<p>hello</p>',
			toolbarConfig: {},
			editorConfig: {
				placeholder: '请输入内容...',
				MENU_CONF: {
					uploadImage: {
						server: '/system/v1/common/fileUpload',
						fieldName: 'filecontent',
						maxFileSize: 5 * 1024 * 1024,
						// MaxFileLength: 50,
						// showBase64:true,
						// maxNumberOfFiles: 3,
						allowedFileTypes: ['image/jpeg', 'image/jpg', 'image/png'],
						onSuccess(file, res) {},
						onFailed(file, res) {
							console.log(`${file.name} 上传失败`, res);
							localStorage.setItem('url', res.data.fileurl)
						},
						customInsert(res, insertFn) {
							// 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
							// 先关闭等待的Message
							localStorage.setItem('url', res.data.fileurl)
							console.log(res);
							console.log(this);

							setTimeout(() => {
								insertFn(res.data.fileurl, res.data.fileurl);
							}, 1500)
						},
					},
				}

			},
			mode: 'default', // or 'simple'
			title: "",
			label: "内容编辑",
			add: "",
			accessoryid: "",
			isClear: false,
			detail: "",
			myConfig: {
				// 如果需要上传功能,找后端小伙伴要服务器接口地址
				serverUrl: '/system/v1/common/upload',
				// 你的UEditor资源存放的路径,相对于打包后的index.html
				UEDITOR_HOME_URL: './assets/NEditor/',
				// 编辑器不自动被内容撑高
				autoHeightEnabled: false,
				// 初始容器高度
				initialFrameHeight: 240,
				// 初始容器宽度
				initialFrameWidth: '100%',
				// 关闭自动保存
				enableAutoSave: false,

			},
			rules: {
				title: [{
					required: true,
					message: '标题不能为空',
					trigger: 'blur'
				}],
			}
		};
	},
	beforeDestroy() {
		const editor = this.editor
		if (editor == null) return
		editor.destroy() // 组件销毁时，及时销毁编辑器
	},
	mounted() {
		console.log(this.$refs.editor);
		setTimeout(() => {
			this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
		}, 1500)
		switch (this.$route.query.type) {
			case 'add':
				this.title = "新增";
				break;
			case 'editor':
				this.title = "编辑";
				break;
			default:
				this.title = "详情";
				this.label = "内容详情"
				break;
		}
		if (this.$route.query.active != 3) {
			this.geteData()
		}
	},
	methods: {
		onChange(data) {
			console.log(this.$refs.editor);
		},
		onChanges(data) {
			console.log(data);
		},
		onCreated(editor) {
			this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
		},
		// 获取和设置富文本内容
		ready(editorInstance) {
			// editorInstance.setContent(this.model.content);
			if (this.$route.query.type === 'newestDetails') {
				editorInstance.setDisabled();
			} else {
				editorInstance.setEnabled();
			}
			// editorInstance.addListener('contentChange', () => {
			//   this.form.context = editorInstance.getContent();
			// })
		},


		//修改最新动态获取数据
		geteData() {
			this.$axios.$post('/system/v1/platform/action/detail', {
				actionid: this.$route.query.actionid
			}).then(res => {
				this.form = res.data.data
				this.form.url = res.data.data.accessoryid
			})
		},

		change(val) {
			console.log(val)

		},
		// 图片返回成功
		handleAvatarSuccess(res, file) {
			setTimeout(() => {
				this.form.url = res.data.fileurl;
			}, 1500)
			this.editor.focus(true)
			// this.form.logo = URL.createObjectURL(file.raw);
		},
		// 上传图片的限制
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg';
			const isGIF = file.type === 'image/gif';
			const isPNG = file.type === 'image/png';
			const isBMP = file.type === 'image/bmp';
			const isLt2M = file.size / 1024 / 1024 < 10;
			if (!isJPG && !isGIF && !isPNG && !isBMP) {
				this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!');
				return
			}
			if (!isLt2M) {
				this.$message.error('上传大小不能超过 2MB!');

			}
			if (!isJPG && !isGIF && !isPNG && !isBMP) {
				this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!');
				return
			}
			if (!isLt2M) {
				this.$message.error('上传大小不能超过 2MB!');
				return isLt2M;
			}
			let reader = new FileReader();
			reader.readAsDataURL(file);
			let that = this
			return new Promise(function(resolve, reject) {
				var reader = new FileReader();
				reader.onload = function(event) {
					var image = new Image();
					image.onload = function() {
						var width = this.width;
						var height = this.height;
						console.log(height, 'height');
						console.log(width, 'width');
						if (width != 512 && height != 512) {
						  that.$message({
						    message: '建议上传图片尺寸为512*512，请重新选择文件',
						    type: 'warning'
						  });
						  reject()
						}
						
						resolve();
					};
					image.src = event.target.result;
				}
				reader.readAsDataURL(file);
			});
			
		},

		// 最新动态编辑提交

		outPut() {
			if (this.form.title === '') {
				this.$message({
					type: 'error',
					message: '标题不为空'
				});
				return
			}
			let sendData = {
				title: this.form.title,
				context: this.form.context,
				accessoryid: this.form.url,
				actionid: this.$route.query.actionid
			}
			// return console.log(sendData);
			this.$confirm('是否要提交?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$axios.$post('/system/v1/platform/action/updateAndInsert', sendData).then(res => {
					if (res.data.code === 1) {
						this.$message({
							type: 'success',
							message: '提交成功!'
						});
						this.$router.push({
							path: '/home/newest',
						});
					} else {
						this.$message({
							type: 'warning',
							message: res.data.message
						});
					}
				})
			})
		},
		cancel() {
			this.$router.back();
		}
	},
};
